| uniapp视频取消控件展示，使用slider自定义视频进度条 | 您所在的位置：网站首页 › css 不显示进度条 › uniapp视频取消控件展示，使用slider自定义视频进度条 |
uniapp视频取消控件展示，使用slider自定义视频进度条
|
思路：video标签 :controls="false"，不展示自带的控件， 通过uni.createVideoContext('myVideo')获取video对象，视频初始化结束的时候@endLoading获取到视频的时长endTime， 视频帧刷新的时候@timeupdate获取当前视频播放的时长startTime。 slider标签进行数据展示 代码：需要自己添加图片和视频地址 
{{startTime}}
{{endTime}}
export default {
data() {
return {
startTime: '00:00',
endTime: "", //视频时长
// videoControl: false, //播放
videoPrecent: 0, //播放进度
videoDuring: 0, //时长
}
},
onLoad() {
},
onShow() {
},
mounted() {
this.videoObj = uni.createVideoContext('myVideo')
},
methods: {
// 视频播放控制
videoControlFun() {
this.videoState = !this.videoState
if (this.videoState) {
this.videoObj.play()
} else {
this.videoObj.pause()
}
},
//进度条拖动
sliderChange(e) {
// console.log('value 发生变化：' + e.detail.value,(this.videoPrecent/100)*this.videoDuring)
this.videoPrecent = e.detail.value
this.videoObj.seek((this.videoPrecent / 100) * this.videoDuring)
this.$forceUpdate()
},
swiperChange(e) {
// console.log(e.detail.current)
this.currentIndex = e.detail.current + 1
},
videoErrorCallback: function(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
// 播放结束
closeVideo() {
this.videoObj.pause()
},
timeupdate(e) { //视频刷新帧
this.videoPrecent = (e.detail.currentTime / e.detail.duration).toFixed(2) * 100
this.startTime = this.handleTime(e.detail.currentTime)
},
// 开始加载
startLoading(e) {
uni.showLoading({
title: '加载中...'
})
},
endLoading(e) {
console.log(e)
let t = e.detail.duration
this.videoDuring = Number(t.toFixed(0))
this.endTime = this.handleTime(t)
uni.hideLoading()
},
// 视频时间转换
handleTime(t) {
let s = ''
if (t < 3600 && t > 60) {
s = t / 60 + Number(t % 60).toFixed(0)
} else if (t >= 10) {
s = "00:" + Number(t.toFixed(0))
} else {
s = "00:0" + Number(t.toFixed(0))
}
return s
},
}
}
/*放app.vue内每个页面公共css 1rem=10px*/
html {
font-size: calc(100vw / 37.5);
}
.video_parent{
width: 100vw;
height: 100vh;
position: absolute;
display: flex;
align-items: center;
top: 0;
left: 0;
z-index: 1;
}
.videoClass {
width: 100vw;position: absolute;
right: 0;
height: 100vh;
}
.control_box{
z-index: 1;
position: absolute;
bottom: 4rem;
width: 100vw;
height: 2.4rem;
padding-left: .8rem;
box-sizing: border-box;
}
.control_box .control_icon{
width: 2.4rem;
height: 2.4rem;
position: absolute;
}
.control_box .time{
font-size: 1.3rem;
color:#fff;
line-height: 1.5rem;
position: absolute;
left: 3.9rem;
}
图片资源：control_play.png/control_pause.png 
效果图： 
|
【本文地址】
公司简介
联系我们